<#include "/pages/macro.ftl">
<@override name="title">留言列表</@override>

<@override name="header">
<script src="${base}/scripts/jquery.js"></script>
<script src="${base}/scripts/semantic.min.js"></script>
<script src="${base}/scripts/jquery.dataTables.min.js"></script>
<script src="${base}/scripts/dataTables.semanticui.min.js"></script>
<script src="${base}/scripts/jquery.serialize-object.min.js"></script>

<link rel="stylesheet" href="${base}/themes/semantic.min.css">
<link rel="stylesheet" href="${base}/themes/dataTables.semanticui.min.css">
</@override>
<@override name="main-content">

<div class="sixteen wide column">
    <div class="ui segment">
        <table class="ui celled table" id="message-table">
            <thead>
            <tr>
                <th class="one wide">序号</th>
                <th class="two wide">用户</th>
                <th class="three wide">标题</th>
                <th class="four wide">内容</th>
                <th class="three wide">发布时间</th>
                <th class="three wide">操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>

        </table>
    </div>
</div>
    <@logon>
    <div class="ui centered ten wide column">
        <div style="text-align:center;"><h2>发表留言</h2></div>
        <form method="post" class="ui form" id="create-message-form">
            <div class="ui segment">
                <div class="field">
                    <label for="title">标题</label>
                    <input class="input" type="text" id="title" name="title" placeholder="请输入标题" autocomplete="off">
                </div>
                <div class="field">
                    <label for="content">内容</label>
                    <textarea name="content" rows="6" id="content"> </textarea>
                </div>
                <input type="hidden" name="user_id" value="${(session.user.id)!''}"/>

                <button class="ui fluid green button">留言</button>
            </div>

        </form>
    </div>
    </@logon>
</@override>

<@override name="additional">
<!-- 删除确认对话框 -->
<div class="ui small modal" id="delete-dialog">
    <div class="header">
        删除留言
    </div>
    <div class="content">
        确定要删除该条留言吗？
    </div>
    <div class="actions">
        <a class="ui approve blue button">确定</a>
        <a class="ui cancel red button">取消</a>
    </div>
</div>
<!-- 删除确认对话框结束 -->

<!-- 编辑对话框 -->
<div class="ui small modal" id="edit-dialog">
    <div class="header">
        编辑留言
    </div>
    <div class="content">
        <form class="ui fluid form" id="edit-form">
            <div class="ui error message"></div>
            <div class="field">
                <label for="title">标题</label>
                <input class="input" type="text" id="title" name="title" placeholder="请输入标题" autocomplete="off">
            </div>
            <div class="field">
                <label for="content">内容</label>
                <textarea id="content" name="content" rows="5"></textarea>
            </div>
            <input type="hidden" name="message.id" id="mid">
        </form>
    </div>
    <div class="actions">
        <a class="ui approve blue button">确定</a>
        <a class="ui cancel red button">取消</a>
    </div>
</div>
<!-- 编辑对话框结束 -->
</@override>

<@override name="script">
<script>
    $(document).ready(function () {

        var userId = ${(session.user.id)!"-1"};
        var dt = $("#message-table").DataTable({
                    serverSide: true,
                    filter: false,
                    order: false,
                    ajax: {
                        url: "${base}/message/json",
                        method: "GET",
                        dataSrc: "data",
                        data: function (req) {
                            delete req.columns;
                            delete req.search;
                        }

                    },
                    columns: [
                        {"data": "id", target: 0},
                        {"data": "nickname", target: 1},
                        {"data": "title", target: 2},
                        {"data": "content", target: 3},
                        {"data": "pubdate", target: 4},
                        {
                            "data": "user_id", target: 5,
                            render: function (value) {
                                if (userId == value)
                                    return "<a class='ui blue icon edit button'><i class='edit icon'></i>编辑</a><a class='ui red icon delete button'><i class='delete icon'></i>删除</a>";
                                else return "";
                            }
                        }
                    ]
                }
        );

        function deleteMessage(id) {
            $.ajax({
                url: "${base}/message/delete/" + id,
                type: "POST",
                success: function (response) {
                    if (response.success) {
                        dt.ajax.reload(null, false);
                    } else {
                        alert(response.message);
                    }
                }, error: function () {
                    alert("删除失败！");
                }

            });
        }

        function updateMessage() {
            $.ajax({
                url: "${base}/message/update",
                type: "POST",
                data: $("#edit-form").serialize(),
                success: function (response) {
                    if (response.success) {
                        dt.ajax.reload(null, false);
                    } else {
                        alert(response.message);
                    }
                }, error: function () {
                    alert("编辑失败！");
                }

            });
        }


        $("#message-table tbody").on("click", ".delete",
                function () {
                    var message = dt.row($(this).parents("tr")).data();
                    $("#delete-dialog").modal({
                        closeable: false,
                        onApprove: function () {
                            deleteMessage(message.id, message.user_id);
                        }


                    }).modal("show");
                }
        );

        $("#message-table tbody").on("click", ".edit",
                function () {
                    var message = dt.row($(this).parents("tr")).data();
                    $("#title").val(message.title);
                    $("#content").html(message.content);
                    $("#mid").val(message.id);
                    $("#edit-dialog").modal({
                        closeable: false,
                        onApprove: function () {
                            updateMessage();
                        }


                    }).modal("show");
                }
        );

        var createMessageForm = $("#create-message-form").form({
            on: "submit",
            fields: {
                title: {
                    identifer: "title",
                    rules: [{
                        type: "empty",
                        prompt: "留言标题不能为空"
                    }]
                },
                content: {
                    identifer: "content",
                    rules: [{
                        type: "empty",
                        prompt: "留言内容不能为空"
                    }]
                }
            }
        }).api({
            url: "${base}/message/save",
            method: "POST",
            serializeForm: true,
            successTest: function (response) {
                return response.success || false;

            }, onSuccess: function (response) {
                $(this).form("clear");
                dt.ajax.reload(null, false);
            }, onFail: function (response) {
                alert(response.message);

            }
        });

        $(".ui.dropdown").dropdown();

    });

</script>



</@override>

<@extends name="../main-layout.ftl"></@extends>